"use client";

import React, { useState, useEffect } from "react";
import { Button, Spin } from "antd";
import { useRouter } from "next/navigation";
import { splicingQuery } from "@/libs/util";
import req from "@/libs/request";
import { ApiName, ModuleName } from "../../constant";
import AnalysisAtlas from "@/components/AnalysisAtlas";
import RecommendList from "../RecommentList";
import "./index.css";

interface AssessmentReportProps {
    practiceId: string;
    onHandleAnswerAnalysis: (key: string) => void;
}

interface SkillItem {
    name: string;
    star: number;
}

const AssessmentReport: React.FC<AssessmentReportProps> = ({
    practiceId,
    onHandleAnswerAnalysis,
}) => {
    const router = useRouter();
    const [title, setTitle] = useState<string>("测试试卷");
    const [correctSubject, setCorrectSubject] = useState<string>("3");
    const [spinning, setSpinning] = useState<boolean>(false);
    const [recommendSetList, setRecommendSetList] = useState<any[]>([]);
    const [skill, setSkill] = useState<SkillItem[]>([]);

    useEffect(() => {
        getReport();
    }, [practiceId]);

    /**
     * 答案解析-获得评估报告
     */
    const getReport = async () => {
        try {
            setSpinning(true);
            // TODO: 替换为实际API调用
            const mockData = {
                skill: [
                    { name: "HTML/CSS", star: 85 },
                    { name: "JavaScript", star: 75 },
                    { name: "React", star: 80 },
                ],
                correctSubject: "3",
                title: "前端开发能力评估",
            };

            let list = mockData.skill || [];
            const len = mockData.skill.length;

            if (len === 1) {
                list = [
                    ...list,
                    {
                        name: mockData.skill[0].name + " ",
                        star: mockData.skill[0].star,
                    },
                    {
                        name: " " + mockData.skill[0].name + " ",
                        star: mockData.skill[0].star,
                    },
                ];
            } else if (len === 2) {
                list = [
                    ...list,
                    {
                        name: mockData.skill[1].name + " ",
                        star: mockData.skill[1].star,
                    },
                ];
            }

            setSkill(list);
            setCorrectSubject(mockData.correctSubject);
            setTitle(mockData.title);
        } catch (error) {
            console.error("获取评估报告失败:", error);
        } finally {
            setSpinning(false);
        }
    };

    /**
     * 练习其他技能
     */
    const handlePracticeOther = () => {
        router.push("/practise-questions");
    };

    /**
     * 查看答案解析
     */
    const handleAnswerAnalysis = () => {
        onHandleAnswerAnalysis(ModuleName.analysis);
    };

    /**
     * 点击推荐套题
     */
    const handleSetId = (setId: string) => {
        router.push(
            splicingQuery("/practise-details", {
                setId,
            })
        );
    };

    return (
        <Spin spinning={spinning}>
            <div className="assessment-report-container">
                <div className="assessment-report-header">
                    <div className="assessment-report-main">
                        <div className="assessment-report-item">
                            试卷：{title}
                        </div>
                        <div className="assessment-report-item">
                            正确题数：{correctSubject}
                        </div>
                        <Button
                            className="assessment-report-submit"
                            type="primary"
                            onClick={handlePracticeOther}
                        >
                            练习其他技能
                        </Button>
                    </div>
                    <div className="assessment-report-chart">
                        <div className="assessment-report-chart-title">
                            你的技能图谱
                        </div>
                        <div className="assessment-report-chart-content">
                            <AnalysisAtlas
                                aliasStr="正确率"
                                atlasList={skill}
                                atlasMin={-25}
                                atlasWidth={200}
                                atlasHeight={200}
                            />
                        </div>
                    </div>
                </div>
                {recommendSetList.length > 0 && (
                    <RecommendList
                        recommendSetList={recommendSetList}
                        onHandleSetId={handleSetId}
                    />
                )}
                <div className="assessment-report-footer">
                    <Button
                        className="assessment-report-answer-btn"
                        type="primary"
                        onClick={handleAnswerAnalysis}
                    >
                        查看答案解析
                    </Button>
                </div>
            </div>
        </Spin>
    );
};

export default AssessmentReport;
